<template>
  <div class="app-container">
    <div
      :v-loading="tableParams.load"
      :element-loading-text="tableParams.loadText"
    >
      <el-table
        v-if="tableData.length"
        :key="tableParams.key"
        :data="tableData"
        fit
        highlight-current-row>
        <el-table-column
          v-for="(item,index) in row"
          :key="index"
          :label="item.name"
          :prop="item.code"
          :align="item.align"
          :width="item.width"
        />
        <!--<el-table-column
          v-if="tableBtn.btn.length>0"
          :fixed="tableBtn.fixed"
          label="操作"
          :align="tableBtn.align"
          :width="tableBtn.width"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(item,index) in tableBtn.btn"
              :key="index"
              :type="item.type"
              size="mini"
              @click="funDo(scope.row)"
            >{{ item.name }}</el-button>
          </template>
        </el-table-column>-->
        <slot name="btn"></slot>
      </el-table>
      <slot name="page"></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TableShow',
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableParams: {
      type: Object,
      default: function() {
        return {
          load: false,
          key: 'tableKey',
          loadText: 'loading'
        }
      }
    },
    row: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableBtn: {
      type: Object,
      default: function() {
        return {
          btn: [],
          fixed: null,
          align: 'left',
          width: ''
        }
      }
    }
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {
    funDo(data) {
      this.$emit(data.fun)
    }
  }
}

</script>

<style scoped>
  .filter-container{
    margin-bottom: 20px;
  }
  .filter-item{
    margin-right: 10px;
  }
  .fillcontain {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .pagination {
    text-align: right;
    margin-top: 10px;
  }
  .checkbox-style{
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
  }
  .el-status:hover{
    cursor: pointer;
  }
</style>
